<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:hover{
            background: #000;
        }

    </style>
</head>
<body>
<div>
    这是master.
    这是master的第一次修改.
</div>
<div id="forms01">
    <form action="#">
        <input type="text" value="123" name="input1"><br>
        <input type="text" name="input2"><br>
        <input type="text" name="input3"><br>
        <textarea name="text1" cols="30" rows="10"></textarea><br>
        <textarea name="text2" cols="30" rows="10"></textarea><br>
        <textarea name="text3" cols="30" rows="10"></textarea><br>
        <select name="select1"><br>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select><br>
        <button type="button" id="choose">click</button>
    </form>
</div>
<script>
    var texts=document.getElementById("texts");
    document.forms[0].addEventListener("click", function (event) {
        console.log(event);
        var formData = {};
        if(event.target.id=="choose"){
            var formValue = event.target.parentNode.querySelectorAll("[name]");
            for (var i = 0, l = formValue.length; i < l; i++) {
                formData[formValue[i].name] = formValue[i].value;
            }
            var textInner=document.createTextNode(JSON.stringify(formData));
            texts.appendChild(textInner);
        }
    });

</script>
</body>
</html>